<template>
  <md-nav-bar :title="data.typeName + '记录'" />
  <div class="container">
    <view class="list">
      <md-page-list :api="api" @change="pageChange" resKey="data">
        <view class="list-item" v-for="(item, index) in data.list" :key="index">
          <view :class="[item.status === 1 ? 'green' : 'red', 'flex-1']">{{ item?.name }}</view>
          <view class="right flex-1">{{ data.typeName }}时间：{{ item.createtime }}</view>
        </view>
      </md-page-list>
    </view>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { prizeRecord, prizeCheckRecord } from '@/api/index';
import type { Coupon } from '@/api/data';
import { onLoad } from '@dcloudio/uni-app';

const data = reactive<{ typeName: string; list: Coupon.Record.Data[] }>({
  typeName: '',
  list: [],
});
const api = ref<any>();

// 分页回调
const pageChange = (list: Coupon.Record.Data[]) => {
  data.list = list;
};

onLoad(options => {
  data.typeName = options?.type === 'prize_ticket' ? '核销' : '抽奖';
  api.value = options?.type === 'prize_ticket' ? prizeCheckRecord : prizeRecord;
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  .list {
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border-radius: 10rpx;
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      &:not(:last-of-type) {
        margin-bottom: 20rpx;
      }
      font-size: 28rpx;
      color: $title;
      .green {
        color: green;
      }
      .red {
        color: red;
      }
    }
  }
}
</style>
